
.layout{
    max-width:640px;
    min-width:320px;
    .header{
        z-index: 2;
        background-color: #09f;
        width: 100%;
        height: 0.85rem;
        position: fixed;
        max-width:640px;
        min-width:320px;
        .iconfont{
            font-size:0.4rem;
        }
        a{
            position: absolute;
            top: 50%;
            transform:translateY(-50%);
            text-align: center;
            color:#fff;
            p{
                margin: 0 0 0px;
            }
            &:nth-child(1){
                left: 0.43rem;
                
            }
            &:nth-child(3){
                right: 0.43rem;
            }
        }
        form{
            height: 0.85rem;
            position: relative;
            padding:0 1.25rem;
           &::before{
                position: absolute;
                font-size:0.3rem;
                margin-left: 0.1rem;
                top:50%;
                transform: translateY(-50%);
            }
           
            input{
                width: 100%;
                padding-left: 0.5rem;
                height: 0.5rem;
                margin-top:0.175rem;
                 line-height: 0.5rem;
                font-size: 0.14rem;
                background-color:#515557;
                border:none;
            }
        }
        
    }
    .main{
        padding:0.85rem 0;
        .cate{
            .cate-top{
                height: 0.68rem;
                line-height: 0.68rem;
                padding-left:0.15rem;
                &::before{
                    color:#09f;
                }
                font-size:0.24rem;
            }
            .cate-body{
                ul::before , ul::after{
                    content:"";
                    display: block;
                    position: absolute;
                    bottom:0.1rem;
                    height: 0.1rem;
                    width:0.1rem;
                    border:0.01rem solid grey;
                    border-radius:50%;
                    background-color: grey;
                   
                }

                ul::before {
                    left:48%;
                    transform: translateX(-50%);
                    z-index: 1;
                }
                ul::after{
                    left:52%;
                    transform: translateX(-50%);
                    background-color: #fff;
                    z-index: 1;
                }
                 ul{
                     position: relative;
                     overflow: hidden;
                     z-index: 0;
                     
            li{
                text-align: center;
            }
        }
            }
           
        }
        .cate_pro{
            margin:0.2rem 0;
            .cate_pro_top{
                height: 0.68rem;
                line-height: 0.68rem;
                padding-left:0.15rem;
                border-bottom:0.01rem solid #eee;
                &::before{
                    color:#09f;
                }
                font-size:0.24rem;
            }
            .cate_pro_body{
                div{
                    float: left;
                }
               ul{
                   li{
                       border-bottom:0.01rem solid #eee;
                      height: 1.8rem; 
                      margin-top:0.2rem;
                      .left{
                          width: 2rem;
                          height: 1.2rem; 
                          margin:0.2rem  0.3rem;
                          border:0.01rem solid #eee;
                          background: url(../images/img/p1.jpg) no-repeat;
                      }
                      .right{
                        margin:0.2rem  0.3rem;
                        height: 1.2rem; 
                       .pro_left{
                            h5{
                              font-size: 0.2rem; 
                          }
                        }
                        .pro_right{
                            margin-left:0.3rem;
                            p:nth-child(1){
                                color:#09f;
                                font-size: 0.18rem;
                                text-align: center;
                            }
                            p:nth-child(2){
                                margin-left:0.1rem;
                                margin-top:0.4rem;
                            }
                        }
                          
                      }
                   }
               } 
            }
        
    }
}
    .footer{
        background-color: #fff;
        width: 100%;
        height: 0.85rem;
        position: fixed;
        max-width:640px;
        min-width:320px;
        bottom:0;
        border-top:0.01rem solid #eee;
        display: flex;
        .iconfont{
            font-size:0.3rem;
        }
        a{
            height: 0.85rem;
            text-align: center;
            flex:1;
            color:#666666;
            margin-top:0.425rem;
            transform: translateY(-50%);
            padding-top: 0.11rem;
            p{
                margin-bottom: 0;
            }
        }
    }
}